<template>
    <cl-row>
        <cl-col :span="6"><div style="background:blue;height:40px;"></div></cl-col>
        <cl-col :span="6" :offset="6"><div style="background:pink;height:40px;"></div></cl-col>
        <cl-col :span="6" ><div style="background:red;height:40px;"></div></cl-col>
    </cl-row>
    <br/>
    <cl-row :gutter="20">
        <cl-col :span="6"><div style="background:blue;height:40px;"></div></cl-col>
        <cl-col :span="6" ><div style="background:pink;height:40px;"></div></cl-col>
        <cl-col :span="6" ><div style="background:red;height:40px;"></div></cl-col>
        <cl-col :span="6" ><div style="background:yellow;height:40px;"></div></cl-col>
    </cl-row>
    <br/>
    <cl-row justify="space-around">
        <cl-col :span="3"><div style="background:blue;height:40px;"></div></cl-col>
        <cl-col :span="3" ><div style="background:pink;height:40px;"></div></cl-col>
        <cl-col :span="3" ><div style="background:red;height:40px;"></div></cl-col>
    </cl-row>
    <br/>
    <!-- xs	<768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
    sm	≥768px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
    md	≥992px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
    lg	≥1200px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	—
    xl	≥1920px 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	—	— -->
    <cl-row>
        <cl-col :md="24" :lg="24" :xl="24"><div style="background:blue;height:40px;"></div></cl-col>
        <br/>
        <cl-col :md="12" :lg="8" :xl="6"><div style="background:red;height:40px;"></div></cl-col>
    </cl-row>
</template>